<template>
  <nav-bar></nav-bar>
  <div class="notice-box">
    <div class="box-left">
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span class="header-text">公告处理</span>
          </div>
        </template>
        <!-- 这里就是显示表格数据的部分，分页请求 -->
        <div>
          <el-table :data="tableData">
            <el-table-column
              prop="area_name"
              label="区域名"
              width="180"
            />
            <el-table-column
              prop="title"
              label="公告标题"
              width="350"
            />
            <el-table-column
              prop="submit_time"
              label="发布时间"
              width="250"
            />
            <el-table-column
              prop="tel"
              label="联系电话"
              width="150"
            />
            <el-table-column
              fixed="right"
              label="处理状态"
              width="135"
            >
              <!-- 这里是一个插槽，给插槽绑定数据，否则不能识别，会报错 -->
              <template #default="tableData">
                <!-- 可以拿到这一行数据对应的id -->
                <div v-if="tableData.row.notice_status == 0">
                  <el-button
                    plain
                    type="success"
                    size="small"
                    @click.prevent="handleDetail(tableData.row)"
                    >详情</el-button
                  >
                  <el-button
                    plain
                    type="warning"
                    size="small"
                    @click.prevent="handleRevoke(tableData.row)"
                    >撤销</el-button
                  >
                </div>
                <div v-else>公告已过期</div>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="left-pagecontrol">
          <el-pagination
            v-model:current-page="myPage"
            :page-size="9"
            layout="total, prev, pager, next"
            v-model:total="myTotal"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-card>
    </div>
    <div class="box-right">
      <el-card>
        <!-- 这里要写一个卡片，卡片里面是收集用户信息的表单 -->
        <!--  管理员添加事件收集数据的表单 -->
        <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          :rules="rules"
          label-width="120px"
          :size="formSize"
          status-icon
          style="max-width: 520px"
        >
          <!-- 公告标题 -->
          <el-form-item
            label="公告标题"
            prop="title"
          >
            <el-input
              v-model="ruleForm.title"
              placeholder="请填写公告标题"
            />
          </el-form-item>
          <!-- 影响区域 -->
          <el-form-item
            label="影响区域"
            prop="area_id"
          >
            <el-select
              v-model="ruleForm.area_id"
              placeholder="请选择区域名称"
              :teleported="false"
            >
              <el-option
                label="洪福添美"
                value="1"
              />
              <el-option
                label="洪福家园"
                value="2"
              />
              <el-option
                label="紫菘枫林上城"
                value="3"
              />
              <el-option
                label="阳光在线2期"
                value="4"
              />
              <el-option
                label="关山荷兰风情街"
                value="5"
              />
              <el-option
                label="阳光在线小区南区"
                value="6"
              />
              <el-option
                label="光谷青年城"
                value="7"
              />
            </el-select>
          </el-form-item>
          <!-- 描述 -->
          <el-form-item
            label="公告内容"
            prop="content"
          >
            <el-input
              v-model="ruleForm.content"
              type="textarea"
              rows="16"
              resize="none"
              class="left-textarea"
            />
          </el-form-item>
          <!-- 提交按钮 -->
          <!-- 重置按钮 -->
          <!-- 返回按钮 -->
          <el-form-item class="right-btn">
            <el-button
              type="primary"
              @click="submitForm(ruleFormRef)"
              >提交</el-button
            >
            <el-button
              plain
              type="primary"
              @click="resetForm(ruleFormRef)"
              >重置</el-button
            >
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </div>
</template>
<script setup>
import { ref, reactive, onMounted } from "vue"
import { getNoticeTable } from "./Hooks/useGetNotice"
import { NoticeHttp } from "../../http/notice"
import { ElMessage, ElMessageBox } from "element-plus"
import NavBar from "../../components/NavBar.vue"
import { useUserStore } from "../../stores/users"
const userPinia = useUserStore()
let userId = userPinia.user.id
/* 左侧的列表 */
/* 给表格绑定的数据 */
const tableData = ref([])
/* 控制表格分页的变量 */
/* 当前所在的页数 */
const myPage = ref(1)
/* 表格中数据的总条数 */
const myTotal = ref(0)

/* 控制表单内控件的尺寸，不能删掉，因为没有默认值 */
const formSize = ref("default")
/* 提交表单的时候会验证信息是否填正确 */
const ruleFormRef = ref()
/* 右侧的表单 */
const ruleForm = reactive({
  title: "",
  area_id: null,
  content: "",
  user_id:userId,
})
const rules = reactive({
  area_id: [
    {
      required: true,
      message: "请您选择受影响的区域",
      trigger: "change",
    },
  ],
  title: [{ required: true, message: "请您填写公告标题", trigger: "blur" }],
  content: [
    {
      required: true,
      message: "请您填写公告的具体内容",
      trigger: "blur",
    },
  ],
})
onMounted(() => {
  getNoticeTable(tableData, myPage, myTotal)
})
function handleCurrentChange(nowPage) {
  //console.log(nowPage)
  myPage.value = nowPage
  getNoticeTable(tableData, myPage, myTotal)
}
const handleRevoke = async (row) => {
  /* 这个函数是用来修改公告的状态的，点击了之后就会把公告的属性值修改 */
  let { id } = row
  let res = await NoticeHttp.passNotice(id)
  if (res.code == 200) {
    ElMessage({
      message: "公告撤销成功！",
      type: "success",
    })
    console.log("成功撤销")
  }
  getNoticeTable(tableData, myPage, myTotal)
}

/* 用来处理添加公告的表单的函数 */
const submitForm = (formEl) => {
  if (!formEl) {
    return
  }
  formEl.validate(async (valid, fields) => {
    if (valid) {
      /* 向后端发送请求 */
      let res = await NoticeHttp.publishNotice(ruleForm)
      /* 如果数据成功写入数据库，code==200 */
      if (res.code == 200) {
        ElMessage({
          message: "事故提交成功！",
          type: "success",
        })
        getNoticeTable(tableData, myPage, myTotal)
        formEl.resetFields()
      }
    } else {
      ElMessage.error("请您填写公告的相关信息")
      /* elementui提示先在地图上点点 */
      return false
    }
  })
}
const resetForm = (formEl) => {
  if (!formEl) return
  formEl.resetFields()
}
const handleDetail = async (row) => {
  let { id } = row
  /* 向后端发送请求，查找这条公告的详细信息 */
  let res = await NoticeHttp.getNoticeById(id)
  console.log(res)
  let { title, submit_time, area_name, tel, content } = res.result
  ElMessageBox.alert(
    `<strong style="margin:0 auto">${title}</strong>
    <div style="font-size: 6px"><i>发布时间:${submit_time}</i></div>
    <div style="font-size: 6px">影响区域:${area_name}</div>
    <div style="font-size: 6px">负责人联系方式:${tel}</div>
    <p>
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;${content}
    </p>`,
    "公告详情",
    {
      confirmButtonText: "关闭",
      dangerouslyUseHTMLString: true,
      center: true,
    }
  )
}
</script>
<style scoped lang="stylus">
.notice-box
    height 90vh
    width 100%
    display flex
    justify-content space-evenly
    align-items center
    .box-left
        width:49%
        height 98%
        .box-card
          width:96%
          height:97%
          position:relative
          overflow:auto
          .card-header
            display: flex;
            justify-content: space-between;
            align-items: center;
            .header-text
              font-size:30px
              font-weight:600
        .left-pagecontrol
          bottom:17px
          position:absolute
    .box-right
        width:49%
        height:98%
        /* background-color pink */
        .el-form-item--default
          margin-bottom:22px
        .left-textarea
          overflow:auto
        .right-btn
          margin-top:10px
          .el-button+.el-button
            margin-left 150px
          .el-button
            padding-left 38px
            padding-right 38px
</style>
